<template>
  <div class="number-container d-flex justify-content-center align-items-center" >
      <button type="button" class="btn btn-light btn-sm" @click="sub">-</button>
      <span class="number-box">{{num}}</span>
      <button type="button" class="btn btn-light btn-sm" @click="add">+</button>
  </div>
</template>

<script>
import bus from '@/components/eventBus.js'

export default {
props:{
    // 父传子
    num:{
        type:Number,
        default:1
    },
    // 接收商品的id值,将来,使用eventBus方案,
    // 把数据传递到App.vue,需要通知App组件,更新哪个商品的数据
    // id:{
    //     type:Number,
    //     required:true
    // }
},
methods: {
    // add(){
    //     // 要发送给App的数据格式为{id,value}
    //     // 其中,id是商品的id;value是商品的最新购买数量
    //     const obj={id:this.id,value:this.num+1}
    //     console.log(obj);
    //     // 要做的事情:通过EventBus把obj对象,发送给App.vue组件
    //     bus.$emit('share',obj)
    // },
    add(){
        this.$emit('num-change',this.num+1)
    },
    // sub(){
    //     if(this.num-1==0) return
    //      const obj={id:this.id,value:this.num-1}
    //     console.log(obj);
    //     // 要做的事情:通过EventBus把obj对象,发送给App.vue组件
    //     bus.$emit('share',obj)
    // }
    sub(){
        if(this.num-1==0) return
        this.$emit('num-change',this.num-1)
    }
},
}
</script>

<style lang="less" scoped>
.number-box{
    min-width: 30px;
    text-align: center;
    margin: 0 5px;
    font-size: 12px;
}
.btn-sm{
    width: 30px;
}
</style>